<template>
  <div class="app-container">
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <el-input
          v-model="query.title"
          clearable
          size="small"
          placeholder="请输入公告标题"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <!-- <el-select
          v-model="query.locale"
          clearable
          size="small"
          style="width: 180px"
          class="filter-item"
          placeholder="请选择语言"
        >
          <el-option
            v-for="(key, value) in {
              1: '中文繁体',
              2: '英语',
              4: '日语',
              3: '韩语',
            }"
            :key="key"
            :label="key"
            :value="value"
          />
        </el-select> -->
        <el-date-picker
          v-model="params.date"
          clearable
          type="datetimerange"
          size="small"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          class="filter-item"
          range-separator="~"
          style="width: 380px"
          start-placeholder="请选择发布开始时间"
          end-placeholder="请选择发布结束时间"
        />
        <rrOperation :crud="crud" />
      </div>
      <crudOperation :permission="permission" />
    </div>
    <!--    表单渲染-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible.sync="crud.status.cu > 0"
      :title="crud.status.title"
      width="950px"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        size="small"
        label-width="130px"
        style="margin-top: 30px"
      >
        <template>
          <el-form-item label="公告标题" prop="title">
            <el-input v-model="form.title" />
          </el-form-item>
          <el-form-item label="公告内容" prop="content">
            <vue-editor
              v-model="form.content"
              :editor-toolbar="editorToolbar"
              :custom-modules="customModulesForEditor"
              :editor-options="editorSettings"
              use-custom-image-handler
              @image-added="imageAdded"
            />
          </el-form-item>
          <!-- <el-form-item label="权重" prop="weight">
            <el-input v-model="form.weight" />
          </el-form-item> -->
          <!-- <el-form-item label="公告链接">
            <el-input v-model="form.url" prop="url"/>
          </el-form-item> -->
          <!-- <el-form-item label="发布时间" prop="createAt">
            <template>
              <el-date-picker
                v-model="form.createAt"
                type="datetime"
                style="display: block; margin-bottom: 12px"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择开始时间"
              />
            </template>
          </el-form-item> -->
          <!-- <el-form-item label="语言" prop="locale">
            <el-select
              v-model="form.locale"
              size="small"
              style="width: 360px"
              class="filter-item"
              placeholder="请选择语言"
            >
              <el-option
                v-for="item in country"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item label="是否展示" prop="status">
            <el-select
              v-model="form.status"
              size="small"
              style="width: 360px"
              class="filter-item"
              placeholder="请选择状态"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item label="是否热门" prop="popular">
            <el-switch v-model="form.popular" :active-value="1" :inactive-value="2" />
            <p class="warning-text" style="font-size: 12px">标记为热门公告，将在首页进行轮播展示</p>
          </el-form-item> -->
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button
          :loading="crud.status.cu === 2"
          type="primary"
          @click="crud.submitCU"
        >确认</el-button
        >
      </div>
    </el-dialog>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      style="width: 100%"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column type="index" width="55" label="序号" />
      <el-table-column
        v-if="columns.visible('title')"
        :show-overflow-tooltip="true"
        prop="title"
        label="公告标题"
      />
      <el-table-column
        v-if="columns.visible('createAt')"
        :show-overflow-tooltip="true"
        prop="createAt"
        label="发布时间"
      >
        <template slot-scope="scope">
          <p>{{ parseTime(scope.row.createAt) }}</p>
        </template>
      </el-table-column>
      <!-- <el-table-column v-if="columns.visible('weight')" prop="weight" label="权重" /> -->
    
    
      <!-- <el-table-column
        v-if="columns.visible('url')"
        :show-overflow-tooltip="true"
        prop="url"
        label="公告链接"
      /> -->
      <el-table-column label="操作" width="160px" fixed="right">
        <template slot-scope="scope">
          <udOperation
            :data="scope.row"
            :permission="permission"
            msg="确定要删除该新闻？"
          />
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import CRUD, { presenter, header, crud, form } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import nueslistCrud from '@/api/nueslistCrud'
import { publishStatus } from '@/api/product'

import { VueEditor } from 'vue2-editor'
import { uploadFile } from '@/api/common'
import { mapGetters } from 'vuex'
import { parseTime } from '../../utils'
import { countryList } from '@/api/banner'
// crud交由presenter持有
const defaultCrud = CRUD({
  url: '/admin/notice/get',
  title: '公告列表',
  crudMethod: { ...nueslistCrud }
})
const defaultForm = {
  title: null,
  content: null,
  weight: null,
  createTime: null,
  url: null,
  locale: null
}
export default {
  name: 'Notice',
  components: {
    pagination,
    crudOperation,
    rrOperation,
    udOperation,
    VueEditor
  },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    return {
      params: {},
      permission: {
        // add: ['admin', 'notice:add'],
        // edit: ['admin', 'notice:edit'],
        // del: ['admin', 'notice:del']
      },
      rules: {
        title: [{ required: true, message: '请输入新闻标题', trigger: 'blur' }],
        content: [
          { required: true, message: '请输入新闻内容', trigger: 'blur' }
        ],
        // url: [{ required: true, message: "请输入公告链接", trigger: "blur" }],
        // weight: [
        //   { required: true, message: '请输入权重', trigger: 'blur' }
        // ],
        createTime: [
          { required: true, message: '请选择发布日期', trigger: 'change' }
        ],
        // status: [{ required: true, message: '请选择状态', trigger: 'change' }],
        // locale: [{ required: true, message: '请选择语言', trigger: 'change' }]
      },
      country: [
        {
          value: 1,
          label: '中文繁体'
        },
        {
          value: 2,
          label: '英语'
        },
        {
          value: 4,
          label: '日语'
        },
        {
          value: 3,
          label: '韩语'
        }
      ],
      options: [
        {
          value: 0,
          label: '展示'
        },
        {
          value: 1,
          label: '隐藏'
        }
      ],
      editorToolbar: [
        ['bold', 'italic', 'underline', 'strike'],
        ['blockquote', 'code-block'],
        ['link', 'image'],

        [{ header: 1 }, { header: 2 }],
        [{ list: 'ordered' }, { list: 'bullet' }],
        [{ script: 'sub' }, { script: 'super' }],
        [{ indent: '-1' }, { indent: '+1' }],
        [{ direction: 'rtl' }],

        [{ size: ['small', false, 'large', 'huge'] }],
        [{ header: [1, 2, 3, 4, 5, 6, false] }],

        [{ color: [] }, { background: [] }],
        [{ font: [] }],
        [{ align: [] }],

        ['clean']
      ],
      customModulesForEditor: [
        // { alias: 'imageResize', module: ImageResize }
      ],
      editorSettings: {
        modules: {
          // imageResize: {}
        }
      }
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  mounted() {
    // countryList().then(res => {
    //   console.log(res)
    //   if (res.code == 0) {
    //     this.country = res.data
    //   } else {
    //     this.$message.error(res.message)
    //   }
    // })
  },
  methods: {
    [CRUD.HOOK.beforeReset]() {
      this.params = {}
    },
    [CRUD.HOOK.beforeRefresh](crud) {
      const { date } = this.params
      console.log(date)
      if (date) {
        const [startDate, endDate] = date
        crud.query.startDate = startDate
        crud.query.endDate = endDate
      } else {
        crud.query.startDate = ''
        crud.query.endDate = ''
      }
    },

    // 获取值
    subshutype3() {
      this.crud.form.desc = this.phoneEditor.txt.html()
    },

    [CRUD.HOOK.beforeSubmit](crud) {
      // crud.form.recommandStatus = crud.form.recommandStatus.join(",");
      // crud.form.recommandStatus = crud.form.recommandStatus.join(",");
      // if (crud.form.nature.length === 0) {
      //   delete crud.form.nature;
      // }
    },
    [CRUD.HOOK.afterToCU](crud) {},
    [CRUD.HOOK.beforeToAdd](crud) {
      // getProductCategory({ size: 999, parentId: "0" }).then((res) => {
      //   if (res.code == 0) {
      //     this.productCategoryList = res.data.records;
      //   }
      // });
      // this.active = 0;
    },
    [CRUD.HOOK.beforeToEdit](crud) {
      const str = parseTime(crud.form.createAt)
      this.$set(crud.form, 'createAt', str)
    },
    imageAdded(file, Editor, cursorLocation, resetUploader) {
      // Editor.insertEmbed(cursorLocation, 'image', 'http://47.99.242.58/images/2019-12/1576507389641.jpg')
      if (file.size / 1024 / 1024 < 3) {
        const formData = new FormData()
        formData.append('file', file)
        formData.append('type', 0)
        uploadFile(formData).then((res) => {
          if (res.code == 0) {
            const url = res.data.banner // Get url from response
            setTimeout(() => {
              Editor.insertEmbed(cursorLocation, 'image', url)
              resetUploader()
            }, 500)
          }
        })
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.delets {
  margin-left: 10px;
  color: #409eff;
  background: 0 0;
  padding-left: 0;
  padding-right: 0;
  padding: 9px 15px;
  font-size: 12px;
  border-radius: 3px;
}

.zhutu {
  .avatar-uploader-icon {
    font-size: 25px !important;
    color: #8c939d !important;
    width: 150px !important;
    height: 150px !important;
    line-height: 150px !important;
    border-radius: 6px !important;
    text-align: center !important;
    border: 1px dashed #c0ccda !important;
  }

  img {
    margin-right: 10px;
  }

  .avatar {
    width: 150px !important;
    height: 150px !important;
    display: inline-block !important;
    margin-right: 10px;
  }
}

.uplod {
  .avatar-uploader-icon {
    font-size: 25px !important;
    color: #8c939d !important;
    width: 75px !important;
    height: 75px !important;
    line-height: 75px !important;
    border-radius: 6px !important;
    text-align: center !important;
    border: 1px dashed #c0ccda !important;
  }

  img {
    margin-right: 10px;
  }

  .avatar {
    width: 75px !important;
    height: 75px !important;
    display: inline-block !important;
    margin-right: 10px;
  }
}
</style>
